<template>
    <view class='analyzeDet_page' v-if='page_show'>
        <!-- 分析详情 -->
        <view v-if='one_show'><one-det :content="content1"></one-det></view>
        <view v-if='two_show'><two-det :content="content2" :startTime='startTime'></two-det></view>
        <view v-if='three_show'><three-det :content="content3"></three-det></view>
        <view v-if='four_show'><four-det :content="content4"></four-det></view>
        <!-- <view><four-det :content="content4"></four-det></view> -->
    </view>
</template>

<script>

    import oneDet from './det01.vue'
    import twoDet from './det02.vue'
    import threeDet from './det03.vue'
    import fourDet from './det04.vue'

    export default {
        components: {
            oneDet,
            twoDet,
            threeDet,
            fourDet,
        },
        data() {
            return {
                page_show: false,
               one_show: false, 
               two_show: false, 
               three_show: false, 
               four_show: false, 
               page_index: 0,
               content1: {},
               content2: {},
               content3: {},
               content4: {},
               startTime: ""
            }
        },
        onReachBottom() {
            this.page_index++;
            switch(this.page_index) {
                case 1: 
                   this.two_show = true;
                break;
                case 2: 
                   this.three_show = true;
                break;
                case 3: 
                   this.four_show = true;
                break;
            }
        },
        onLoad(option) {
            this.getData(option.eventId);
            this.startTime = option.startTime;
        },
        onReady() {
           this.one_show = true 
        },
        methods: {
            // 获取数据
            getData(eventId) {
                this.$http({
                    url: this.$api.analyze.details,
                    data: {eventId}
                }).then( res => {
                    if(res.code == 0) {
                        let info = res.data.report;

                        this.content1 = {
                            // 报告概述
                            overview: {
                                total: info.total,           // 数据总量分析
                                hotwords: info.hotwords,     // 词云
                                first: info.first,           // 首发分析
                            },
                            // 趋势分析
                            trend: info.channeltrends,
                            // 参与分析
                            participation: info.partake,
                        }

                        this.content2 = {
                            // 媒体分析
                            media: {
                                participation: info.total,      // 媒体参与分布 
                                foreign: info.foreign,          // 境外分布图
                            },
                            // 情感分布
                            sentiments: info.sentiments,
                            // 事件脉络
                            venation: info.venation,    
                        }

                        this.content3 = {
                            // 词云分析
                            word_cloud: {
                                word: info.hotwords,              // 词云图 事件高频词
                                keywordstrends: info.keywordstrends,      // 关键词演变
                            },
                            // 观点分析
                            viewpoint: info.viewpoint
                        }

                        this.content4 = {
                            zoneblogger: info.zoneblogger,         // 地图数据
                            fans: info.fans,                       // 粉丝分布
                            hired: info.hired,                     // 水军分析
                            interact: info.interact,               // 参与方式
                            interactrank: info.interactrank[0],       // 四个排行
                            weibopoint: info.weibopoint,           // 微博典型观点分析
                        }

                        this.$nextTick(() => {
                            this.page_show = true;
                        })
                    }
                })
            }
        }
    }
</script>

<style scope lang='scss'>
.analyzeDet_page {
    width: 100%;
    padding: 20upx;
    box-sizing: border-box;
}
</style>